import {useState} from "react";
import styles from './dialog-message-input.module.scss';
import {Button, Input} from "antd";
import {userChatStore} from "@/app/store/chat-store";
import DialogMessagesActions from "@/app/components/dialog/dialog-message-actions";


/**
 * 定义一个Props接口，用于输入框组件的属性传入。
 *
 * @interface Props
 * @property {function} onEnter - 当用户按下回车键时调用的回调函数，接受一个字符串参数代表输入的内容。
 */
interface Props {
    onEnter: (value: any) => void;
}


/**
 * 用于展示对话框消息输入的函数组件。
 * @param props 包含组件的属性，其中必须包括一个onEnter函数，该函数在按下回车键时被调用。
 * @returns 返回一个包含输入框的div元素。
 */
export function DialogMessageInput(props: Props) {
    // 使用useState来管理输入框的值
    const {onEnter} = props;

    const chatStore = userChatStore();
    const [value, setValue] = useState<string>();
    const currentSession = chatStore.currentSession();

    // 当按下回车键时的处理函数
    const onSend = (value: any) => {
        // 输入内容
        onEnter(value);
        // 清空当前对话框
        setValue(undefined);
    }

    const handleKeyDown = (e: any) => {
        if (e.ctrlKey && e.key === "Enter") {
            onSend(value);
        }
    }

    // 渲染一个自动获取焦点的文本输入区域
    return (
        <div className={styles.wrapper}>
            <DialogMessagesActions config={currentSession.config}/>
            <Input.TextArea
                value={value}
                onChange={(e) => setValue(e.target.value)}
                className={styles.textarea}
                placeholder={"请输入"}
                autoFocus
                onKeyDown={handleKeyDown}/>
            <Button disabled={!value?.length} type="primary" className={styles.btn}
                    onClick={() => onSend(value)}>发送(Ctrl+Enter)</Button>
        </div>

    );
}